<template>
    <div>
        <Example :component="ExSimple" :code="ExSimpleCode"/>

        <Example :component="ExObjArray" :code="ExObjArrayCode" title="Object array"/>

        <Example :component="ExHeader" :code="ExHeaderCode" title="Header">
            <p>You can add your custom header to the autocomplete.</p>
        </Example>

        <Example :component="ExFooter" :code="ExFooterCode" title="Footer">
            <div class="tags has-addons">
                <span class="tag is-success">Since</span>
                <span class="tag is-info">0.7.6</span>
            </div>
            <p>You can add your custom footer to the autocomplete.</p>
        </Example>

        <Example :component="ExGroups" :code="ExGroupsCode" title="Groups">
            <div class="tags has-addons">
                <span class="tag is-success">Since</span>
                <span class="tag is-info">0.9.2</span>
            </div>
            <p>You can show options by groups</p>
        </Example>

        <Example :component="ExCustomAsync" :code="ExCustomAsyncCode" title="Async with custom template">
            <p>You can have a custom template by adding a scoped slot to it.</p>
            <p><small>API from <a href="https://www.themoviedb.org" target="_blank">TMDb</a></small>.</p>
        </Example>

        <Example :component="ExInfiniteScroll" :code="ExInfiniteScrollCode" title="Async with infinite scroll">
            <p>With <code>check-infinite-scroll</code> and <code>infinite-scroll</code> event you can listen to the end of the scroll list to implement an infinite scroll strategy.</p>
            <p><small>API from <a href="https://www.themoviedb.org" target="_blank">TMDb</a></small>.</p>
        </Example>

        <ApiView :data="api"/>
        <VariablesView :data="variables"/>
    </div>
</template>

<script>
    import api from './api/autocomplete'
    import variables from './variables/autocomplete'

    import ExSimple from './examples/ExSimple'
    import ExSimpleCode from '!!raw-loader!./examples/ExSimple'

    import ExObjArray from './examples/ExObjArray'
    import ExObjArrayCode from '!!raw-loader!./examples/ExObjArray'

    import ExHeader from './examples/ExHeader'
    import ExHeaderCode from '!!raw-loader!./examples/ExHeader'

    import ExFooter from './examples/ExFooter'
    import ExFooterCode from '!!raw-loader!./examples/ExFooter'

    import ExGroups from './examples/ExGroups'
    import ExGroupsCode from '!!raw-loader!./examples/ExGroups'

    import ExCustomAsync from './examples/ExCustomAsync'
    import ExCustomAsyncCode from '!!raw-loader!./examples/ExCustomAsync'

    import ExInfiniteScroll from './examples/ExInfiniteScroll'
    import ExInfiniteScrollCode from '!!raw-loader!./examples/ExInfiniteScroll'

    export default {
        data() {
            return {
                api,
                variables,
                ExSimple,
                ExSimpleCode,
                ExObjArrayCode,
                ExObjArray,
                ExHeader,
                ExHeaderCode,
                ExFooter,
                ExFooterCode,
                ExCustomAsyncCode,
                ExCustomAsync,
                ExInfiniteScroll,
                ExInfiniteScrollCode,
                ExGroups,
                ExGroupsCode
            }
        }
    }
</script>
